import React, { Component } from 'react';
import { Card, Descriptions, Button,  Modal, Form, Input, Row, Col, Select, Checkbox, DatePicker, Radio } from 'antd';

import styles from './style.less';

import moment from 'moment'

const selectOptions = [
    { value: '医疗设备、器械类', key: '医疗设备、器械类' },
    { value: '学校功能设备类', key: '学校功能设备类' },
    { value: '监控设备及系统类', key: '监控设备及系统类' },
    { value: '公安消防设备类', key: '公安消防设备类' },
    { value: '教育典教类', key: '教育典教类' },
    { value: '车辆交通类', key: '车辆交通类' },
    { value: '纺织类', key: '纺织类' },
    { value: '信息系统集成类', key: '信息系统集成类' },
    { value: '办公家具类', key: '办公家具类' },
    { value: '体育健身类', key: '体育健身类' },
    { value: '其他类', key: '其他类' }
]
const children = []
selectOptions.forEach(v => {
    children.push(<Select.Option value={v.key}>{v.value}</Select.Option>)
})



const EditModal = Form.create()(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {
        render() {
            const { visible, onCancel, onCreate, form } = this.props
            const { getFieldDecorator } = form
            return (
                <Modal
                    visible={visible}
                    title="经营数据"
                    width='60%'
                    onCancel={onCancel}
                    onOk={onCreate}
                    style={{top: '33px'}}
                >
                    <Form className={styles.editModalForm} colon={false}>
                        <div className={styles.editModalFormTitle}>企业基本信息：</div>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="企业名称" required={false}>
                                    {getFieldDecorator('name', {
                                        rules: [{ required: true, message: '请输入企业名称!'}],
                                    })(<Input placeholder="请输入企业名称"/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="组织机构代码" required={false}>
                                    {getFieldDecorator('code', {
                                        rules: [{ required: true, message: '请输入组织机构代码!'}],
                                    })(<Input placeholder="请输入组织机构代码"/>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="成立时间" required={false}>
                                    {getFieldDecorator('create_time', {
                                        rules: [{ required: true, message: '请选择!'}],
                                    })(<DatePicker style={{ width: '100%' }} />)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="注册资金" required={false}>
                                    {getFieldDecorator('register_money', {
                                        rules: [{ required: true, message: '请输入注册资金!'}],
                                    })(<Input placeholder="0.00" suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="行业类别" required={false}>
                                    {getFieldDecorator('industry', {
                                        rules: [{ required: true, message: '请选择!'}],
                                    })(<Select placeholder="请选择">
                                        {children}
                                        </Select>)
                                    }
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="是否上市" required={false}>
                                    {getFieldDecorator('islisted', {
                                        rules: [{ required: true, message: '请选择!'}],
                                    })(<Select placeholder="请选择">
                                            <Select.Option value={1}>是</Select.Option>
                                            <Select.Option value={0}>否</Select.Option>
                                        </Select>)
                                    }
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Row gutter={48}>
                                    <Col span={48}>
                                        <Form.Item label="法定代表人" required={false}>
                                            {getFieldDecorator('man', {
                                                rules: [{ required: true, message: '请选择法定代表人!'}],
                                            })(<Input/>)
                                            }
                                        </Form.Item>
                                    </Col>
                                    <Col span={48}>
                                        <Form.Item label="注册地址" required={false}>
                                            {getFieldDecorator('the_address', {
                                                rules: [{ required: true, message: '请选择街道!'}],
                                            })(<Select placeholder="请选择街道">
                                                {children}
                                                </Select>)
                                            }
                                        </Form.Item>
                                    </Col>
                                    <Col span={48}>
                                        <Form.Item required={false}>
                                            {getFieldDecorator('details_address', {
                                                rules: [{ required: true, message: '请输入!'}],
                                            })(<Input.TextArea autoSize={{minRows: 4}} placeholder="请输入详情地址" />)
                                            }
                                        </Form.Item>
                                    </Col>
                                </Row>


                            </Col>
                            <Col span={12}>
                                <Form.Item label="经营范围" required={false}>
                                    {getFieldDecorator('range')(<Input.TextArea autoSize={{minRows: 10}} placeholder="请输入经营范围" />)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="联系人" required={false}>
                                    {getFieldDecorator('contact_people', {
                                        rules: [{ required: true, message: '请输入联系人!'}],
                                    })(<Input placeholder="请输入联系人"/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="联系电话" required={false}>
                                    {getFieldDecorator('contact_phone', {
                                        rules: [{ required: true, message: '请输入联系电话!'}],
                                    })(<Input placeholder="请输入联系电话"/>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="联系人职务" required={false}>
                                    {getFieldDecorator('contact_job', {
                                        rules: [{ required: true, message: '请输入联系人职务!'}],
                                    })(<Input placeholder="请输入联系人职务"/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="联系人地址" required={false}>
                                    {getFieldDecorator('address', {
                                        rules: [{ required: true, message: '请输入联系人地址!'}],
                                    })(<Input placeholder="请输入联系人地址"/>)}
                                </Form.Item>
                            </Col>
                        </Row>

                        <div className={styles.editModalFormTitle}>用房用地情况：</div>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="用地类型：" required={false}>
                                    {getFieldDecorator('landuse_type', {
                                        rules: [{ required: true, message: '请选择!'}],
                                    })(<Radio.Group onChange={this.onChange}>
                                            <Radio value={1}>自有用地</Radio>
                                            <Radio value={0}>租赁用地</Radio>
                                        </Radio.Group>)
                                    }
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="用地／租赁面积：" required={false}>
                                    {getFieldDecorator('landuse_area', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="m2"/>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="租赁到期时间：" required={false}>
                                    {getFieldDecorator('landuse_date', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<DatePicker style={{ width: '100%' }}/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="是否有增资扩产需求：" required={false}>
                                    {getFieldDecorator('isAddAssetsRate', {
                                        rules: [{ required: true, message: '请输入联系人地址!'}],
                                    })(<Radio.Group onChange={this.onChange}>
                                            <Radio value={1}>是</Radio>
                                            <Radio value={0}>否</Radio>
                                        </Radio.Group>)
                                    }
                                </Form.Item>
                            </Col>
                        </Row>

                        <div className={styles.editModalFormTitle}>用房用地情况：</div>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="在岗职工总数" required={false}>
                                    {getFieldDecorator('staff_total', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入"/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="管理人员／专业技术人员／其他" required={false}>
                                    {getFieldDecorator('staff', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入对应人数，并用“，”隔开"/>)}
                                </Form.Item>
                            </Col>
                        </Row>

                    </Form>
                </Modal>
            )
        }
    }
)


// eslint-disable-next-line react/prefer-stateless-function
class BasicInform extends Component {
    state = {
        visible: false,
    }

    showModal = () => {
        const { data } = this.props
        const { form } = this.formRef.props

        form.setFieldsValue({
            create_time: moment(moment(data.create_time).format("YYYY-MM-DD")),
            name: data.name,
            register_money: data.register_money,
            code: data.code,
            industry: data.industry,
            register_address: data.register_address,
            islisted: data.islisted,
            manage_range: data.manage_range,
            owner: data.owner,
            contact_people: data.contact_people,
            contact_job: data.contact_job,
            contact_phone: data.contact_phone,
            address: data.address,
            landuse_type: data.landuse_type,
            landuse_area: data.landuse_area,
            landuse_date: moment(moment(data.landuse_date).format("YYYY-MM-DD")),
            isAddAssetsRate: data.isAddAssetsRate,
            staff_total: data.staff_total,
            staff: `${data.staff_manage}，${data.staff_technology}，${data.staff_else}`,
        })

        this.setState({
            visible: true,
        })
    }


    handleCancel = () => {
        this.setState({ visible: false })
    }

    handleCancel = () => {
        
    }

    handleCreate = () => {
        const { form } = this.formRef.props
        const { confirm } = this.props
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            let staff 
            if (values.staff.includes(",")) {
                staff = values.staff.split(",")
            } else if (values.staff.includes("，")) {
                staff = values.staff.split("，")
            }
            // 岗位人员
            [values.staff_manage, values.staff_technology, values.staff_else] = staff
            // 时间
            values.create_time = moment(values.create_time).valueOf()
            values.landuse_date = moment(values.landuse_date).valueOf()
            // 确认
            console.log(values)
            confirm(values)
            this.setState({ visible: false })
        })
    }

    saveFormRef = formRef => { this.formRef = formRef }

    render () {
        const { data, type } = this.props
        
        // 描述列表标题
        const DescriptionsTitle = ({label, fNode}) => (
            <div 
                style={{ borderTop: fNode ? '1px solid #e8e8e8' :  '' }}
                className={styles.basicInformTitle}
            >
                {label}
            </div>
        )

        // eslint-disable-next-line consistent-return
        const EditHead = () => {
            if (type === 'edit') {
                return (
                    <Card className={styles.basicHeadLayout} bordered={false}>
                        <div className={styles.headName}>一、企业概况</div>
                        <a onClick={this.showModal}>编辑</a>
                    </Card>
                )
            }
            return (<></>)
        }

        return (
            <div>
                {/* <Card className={styles.basicHeadLayout} bordered={false}>
                    <div className={styles.headName}>一、企业概况</div>
                    <a onClick={this.showModal}>编辑</a>
                </Card> */}
                <EditHead />
                <Card bordered={false} className={styles.publicContent}>
                    <DescriptionsTitle label="企业基本信息" fNode="first"></DescriptionsTitle>
                    <Descriptions bordered column={3} size="middle">
                        <Descriptions.Item label="企业名称" span={1.5}>{data.name ? data.name : '／'}</Descriptions.Item>
                        <Descriptions.Item label="成立时间" span={1.5}>{data.create_time ? moment(data.create_time).format("YYYY-MM-DD") : '／'}</Descriptions.Item>
                        <Descriptions.Item label="组织机构代码" span={1.5}>{data.code ? data.code : '／'}</Descriptions.Item>
                        <Descriptions.Item label="行业类别" span={1.5}>{data.industry ? data.industry : '／'}</Descriptions.Item>
                        <Descriptions.Item label="注册资金（万元）" span={1.5}>{data.register_money ? `${data.register_money}（万元）` : '／'}</Descriptions.Item>
                        <Descriptions.Item label="是否上市" span={1.5}>{data.islisted ? '是' : '否'}</Descriptions.Item>
                        <Descriptions.Item label="法定代表人" span={4}>{data.owner ? data.owner : '／'}</Descriptions.Item>
                        <Descriptions.Item label="注册地址" span={4}>{data.register_address ? data.register_address : ''}</Descriptions.Item>
                        <Descriptions.Item label="经营范围" span={4}>{data.manage_range ? data.manage_range : ''}</Descriptions.Item>
                        <Descriptions.Item label="联系人" span={1}>{data.contact_people ? data.contact_people : '／'}</Descriptions.Item>
                        <Descriptions.Item label="联系人职务" span={1}>{data.contact_job ? data.contact_job : '／'}</Descriptions.Item>
                        <Descriptions.Item label="联系人电话" span={1}>{data.contact_phone ? data.contact_phone : '／'}</Descriptions.Item>
                        <Descriptions.Item label="联系地址" span={4}>{data.address ? data.address : '／'}</Descriptions.Item>
                    </Descriptions>
                    <DescriptionsTitle label="用房用地情况"></DescriptionsTitle>
                    <Descriptions bordered column={4} size="middle" layout="vertical">
                        <Descriptions.Item label="用地类型" span={1}>{data.landuse_type ? '自有用地' : '租赁用地'}</Descriptions.Item>
                        <Descriptions.Item label="用地／租赁面积（m2）" span={1}>{data.landuse_area ? data.landuse_area : '／'}</Descriptions.Item>
                        
                        {
                            data.landuse_type ? (
                                <>
                                    <Descriptions.Item label="租赁到期时间" span={1}>／</Descriptions.Item>
                                    <Descriptions.Item label="是否有增资产需求率" span={1}>／</Descriptions.Item>
                                </>
                            ) : (
                                <>
                                    <Descriptions.Item label="租赁到期时间" span={1}>{data.landuse_date ? moment(data.landuse_date).format("YYYY-MM-DD") : '／'}</Descriptions.Item>
                                    <Descriptions.Item label="是否有增资产需求率" span={1}>{data.isAddAssetsRate ? '是' : '否'}</Descriptions.Item>
                                </>
                            )
                        }


                    </Descriptions>
                    <DescriptionsTitle label="人员构成情况"></DescriptionsTitle>
                    <Descriptions bordered column={4} size="middle" layout="vertical">
                        <Descriptions.Item label="在岗职工总数（人）" span={1}>{data.staff_total ? `${data.staff_total}` : '／'}</Descriptions.Item>
                        <Descriptions.Item label="管理人员（人）" span={1}>{data.staff_manage ? `${data.staff_manage}` : '／'}</Descriptions.Item>
                        <Descriptions.Item label="专业技术人员（人）" span={1}>{data.staff_technology ? `${data.staff_technology}` : '／'}</Descriptions.Item>
                        <Descriptions.Item label="其他人员（人）" span={1}>{data.staff_else ? `${data.staff_else}` : '／'}</Descriptions.Item>
                    </Descriptions>
                </Card>

                {/* 弹窗 */}
                <EditModal 
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                />
            </div>
        )
    }
}

// eslint-disable-next-line react/prefer-stateless-function

export default BasicInform